<!-- 关联用户 -->
<template>
	<div class="userinfo u-flex-y-center" @tap="showDetails">
		<u-avatar :size="100"></u-avatar>
		<view class="u-m-l-22 u-flex-sub">
			<view class="flex align-center">
				<view class="name">{{ curAccount.nickName || '--' }}</view>
				<u-tag :text="curAccount.patriRelationName||'其他'" plain size="mini" type="primary" shape="circle"></u-tag>
			</view>
			<view class="account flex align-center">
				<image src="/static/female.png" v-if="curAccount.gender == '女'"></image>
				<image src="/static/male.png" v-else></image>
				<text>{{ getAgeByBirthday(curAccount.birth) }}</text>
			</view>
		</view>
		<view class="exchange u-flex-xy-center" v-if="accountList.length > 0" @tap.stop="exchange">
			<image src="/static/home/exchange.png" mode="widthFix"></image>
			<text>切换</text>
		</view>
	</div>
</template>

<script>
	import {
		getAgeByBirthday
	} from '@/utils/index.js';
	import {
		getAccountUserList
	} from '@/service/api.js';
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'accountInfo',
		data() {
			return {};
		},
		computed: {
			...mapState(['curAccount', 'accountList'])
		},
		methods: {
			showDetails() {},
			exchange() {
				this.$Router.push({
					path: '/pages/account/account'
				});
			},
			getAgeByBirthday(strDay) {
				if (strDay) {
					let age = getAgeByBirthday(strDay);
					return age + '岁';
				}
				return '--';
			}
		}
	};
</script>

<style scoped lang="scss">
	.userinfo {
		color: #1c2023;
		font-size: 24upx;
		z-index: 999;
		margin: 30upx 30upx 0;
		padding: 30rpx;
		position: relative;
		background: #fff;
		border-radius: 16upx;

		.name {
			font-size: 32upx;
			margin-right: 10upx;
			font-weight: 600;
		}

		.account {
			font-size: 30upx;
			margin-top: 10upx;
			color: #36374d;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 10upx;
			}
		}

		.exchange {
			color: #36b7ab;
			font-size: 24upx;
			background: #eafefa;
			padding: 10upx 20upx;
			border-radius: 50upx;
			margin-right: 10upx;

			image {
				width: 32upx;
				height: 32upx;
				display: block;
			}
		}
	}
</style>